<template>
  <el-card class="editor-left" shadow="never">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :name="item.value" v-for="item in tabList" :key="item.value">
        <template #label>
          <div class="flex align-center pointer">
            <el-icon :size="18">
              <component :is="item.iconName"></component>
            </el-icon>
            <span class="ml-1">{{ item.text }}</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="editor-list-wrapper">
      <template v-if="activeName === 'text'">
        <div class="wrapper-text">
          <components-list :list="textList" />
        </div>
      </template>
      <template v-else-if="activeName === 'images'">
        <Uploade @onChangeFile="onChangeFile" class="mb-2" />
        <components-list ref="imageRef" class="wrapper-image" :list="imgList" />
      </template>
      <template v-else-if="activeName === 'shape'">
        <components-list class="wrapper-shape" :list="shapeList" />
      </template>
    </div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import ComponentsList from "@/components/ComponentsList/index.vue";
import Uploade from "@/components/Uploade/index.vue";
import { textDefaultProps, imageDefaultProps, shapeDefaultProps } from "@/defaultProps";
// the component name list
const textPropsList = [
  {
    text: "大标题",
    fontSize: "30px",
    fontWeight: "bold",
    tag: "h2",
    width: "100px",
  },
  {
    text: "楷体副标题",
    fontSize: "20px",
    fontWeight: "bold",
    fontFamily: '"KaiTi","STKaiti"',
    tag: "h2",
    width: "100px",
  },
  {
    text: "正文内容",
    tag: "p",
    width: "100px",
  },
  {
    text: "宋体正文内容",
    tag: "p",
    fontFamily: '"SimSun","STSong"',
    width: "100px",
  },
  {
    text: "Arial style",
    tag: "p",
    fontFamily: '"Arial", sans-serif',
    width: "100px",
  },
  {
    text: "Comic Sans",
    tag: "p",
    fontFamily: '"Comic Sans MS"',
    width: "100px",
  },
  {
    text: "Courier New",
    tag: "p",
    fontFamily: '"Courier New", monospace',
    width: "100px",
  },
  {
    text: "Times New Roman",
    tag: "p",
    fontFamily: '"Times New Roman", serif',
    width: "100px",
  },
  {
    text: "链接内容",
    color: "#1890ff",
    textDecoration: "underline",
    tag: "p",
    width: "100px",
  },
  {
    text: "按钮内容",
    color: "#ffffff",
    backgroundColor: "#1890ff",
    borderWidth: "1px",
    borderColor: "#1890ff",
    borderStyle: "solid",
    borderRadius: "2px",
    paddingLeft: "10px",
    paddingRight: "10px",
    paddingTop: "5px",
    paddingBottom: "5px",
    width: "100px",
    tag: "button",
    textAlign: "center",
  },
];
const textList = textPropsList.map((prop) => {
  return {
    name: "h-text",
    props: {
      ...textDefaultProps,
      ...(prop as any),
    },
  };
});

const imgSourceList = [
  `http://${window["localIp"]}:7878/upload/01.png`,
  `http://${window["localIp"]}:7878/upload/02.png`,
  `http://${window["localIp"]}:7878/upload/03.png`,
];

const imgList = imgSourceList.map((url) => {
  return {
    name: "h-image",
    props: {
      ...imageDefaultProps,
      imageSrc: url,
      width: "150px",
    },
  };
});

const shapePropsList = [
  {
    backgroundColor: "#efefef",
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: "#ccc",
    width: "100px",
    height: "50px",
  },
  {
    backgroundColor: "#efefef",
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: "#ccc",
    borderRadius: "100px",
    width: "100px",
    height: "100px",
  },
  {
    backgroundColor: "#efefef",
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: "#ccc",
    width: "100px",
    height: "100px",
  },
  {
    backgroundColor: "#36cfc9",
    width: "100px",
    height: "50px",
  },
  {
    backgroundColor: "#40a9ff",
    borderRadius: "100px",
    width: "100px",
    height: "100px",
  },
  {
    backgroundColor: "#9254de",
    borderWidth: "5px",
    borderStyle: "solid",
    borderColor: "#ccc",
    width: "100px",
    height: "100px",
  },
];
const shapeList = shapePropsList.map((prop) => {
  return {
    name: "h-shape",
    props: {
      ...shapeDefaultProps,
      ...(prop as any),
    },
  };
});
export default defineComponent({
  name: "EditorLeft",
  components: {
    ComponentsList,
    Uploade,
  },
  setup() {
    const state = reactive({
      activeName: "text",
      textList,
      imgList,
      shapeList,
      tabList: [
        {
          text: "文本",
          value: "text",
          iconName: "tickets",
        },
        {
          text: "图片",
          value: "images",
          iconName: "picture-filled",
        },
        {
          text: "形状",
          value: "shape",
          iconName: "box",
        },
      ],
    });
    let imageRef = ref<any>(null);
    let onChangeFile = (filePath: string) => {
      imageRef.value.onItemClick({
        name: "h-image",
        props: {
          ...imageDefaultProps,
          imageSrc: filePath,
          width: "150px",
        },
      });
    };

    return {
      onChangeFile,
      imageRef,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss" scoped>
.editor-list-wrapper {
  height: calc(100vh - 150px);
  overflow-y: scroll;
}
.wrapper-text {
  display: flex;
  justify-content: center;
}
.wrapper-image {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
